<!DOCTYPE html>
<html ng-app="ionic.example">
  <head>
    <meta charset="utf-8">
    <title>Loading</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="../../dist/css/ionic.css">

  </head>
  <body ng-controller="LoadingCtrl">
    <button class="button button-dark" ng-click="startLoading()">Load</button>
    <script src="../../dist/js/ionic.bundle.js"></script>
    <script>
      angular.module('ionic.example', ['ionic'])

      .controller('LoadingCtrl', function($scope, $ionicLoading) {
        $scope.startLoading = function() {
          $ionicLoading.show({
            //template: '<div>Connection problem.</div><br/><div>Please check your internet connection!</div>',
            delay: 100,
            duration: 3000
          });
          $ionicLoading.hide();
          $ionicLoading.show({
            //template: '<div>Connection problem.</div><br/><div>Please check your internet connection!</div>',
            delay: 100,
            duration: 3000
          });

          console.log('Loading', l);
        };
      });
    </script>
  </body>
</html>
